<template>
  <a-drawer
    :title="title"
    :visible="visible"
    :destroyOnClose="true"
    :width="400"
    :body-style="{ paddingBottom: '80px' }"
    @close="onCloseDrawer"
    :maskClosable="!!isView"
  >
    <a-form layout="vertical">
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item label="业主" v-bind="validateInfos.name">
            <a-input
              placeholder="请输入业主姓名"
              v-model:value="modelRef.name"
              :disabled="isView"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="业主联系人" v-bind="validateInfos.link_name">
            <a-input
              placeholder="请输入业主联系人姓名"
              v-model:value="modelRef.link_name"
              :disabled="isView"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="业主手机号" v-bind="validateInfos.phone">
            <a-input
              placeholder="请输入业主手机号"
              v-model:value="modelRef.phone"
              :disabled="isView"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="业主收款银行" v-bind="validateInfos.bank_name">
            <a-input
              placeholder="请输入业主收款银行"
              v-model:value="modelRef.bank_name"
              :disabled="isView"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="业主收款账号" v-bind="validateInfos.bank_account">
            <a-input
              placeholder="请输入业主收款账号"
              v-model:value="modelRef.bank_account"
              @change="onAccountInput"
              :disabled="isView"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div class="drawer-footer" v-if="!isView">
      <a-button class="mr-10" @click.prevent="onCloseDrawer">取消</a-button>
      <a-button type="primary" @click.prevent="onSubmit">保存</a-button>
    </div>
  </a-drawer>
</template>

<script>
import { computed, defineComponent, reactive, toRefs, toRaw, watch } from "vue";
import { Form, message, TreeSelect } from "ant-design-vue";
import request from "../../../../common/utils/request";
import utils from "../../../../common/utils/utils";
import moment from "moment";

const useForm = Form.useForm;
const SHOW_ALL = TreeSelect.SHOW_ALL;
export default defineComponent({
  name: "CreateProprietor",
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
      default: 0,
    },
    drawerType: {
      type: String,
      default: '',
    }
  },
  setup(props, context) {
    const state = reactive({});

    const title = computed(() => {
      return props.id ? props.drawerType === 'view' ? "查看业主" : "编辑业主" : "新建业主";
    });

    const isView = computed(() => {
      return props.drawerType === 'view'
    });

    /**
     * @description: 表单字段
     */
    const modelRef = reactive({
      name: "",
      link_name: "",
      phone: "",
      bank_name: "",
      bank_account: "",
    });

    /**
     * @description: 验证规则
     */
    const rulesRef = reactive({
      name: [{ required: true, message: "请输入业主名称" }],
      phone: [
        {
          required: false,
          validator: (rules, value) => utils.phoneValidator(rules, value),
        },
      ],
    });

    /**
     * @description: 创建表单
     */
    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );

    /**
     * @description: 触发关闭
     */
    const onCloseDrawer = () => {
      context.emit("onClose");
    };

    /**
     * @description: 提交表单
     */
    const onSubmit = () => {
      let params = { ...toRaw(modelRef), needMsg: true };
      console.log(params);

      validate().then(() => {
        let method = "post";
        let url = "/contract/proprietorAdd";
        if (props.id) {
          method = "put";
          url = "/contract/proprietorEdit";
          params.id = props.id;
        }

        request[method]("/org", url, {
          ...params,
        }).then((res) => {
          message.success(res.msg || "保存成功");
          context.emit("success");
        });
      });
    };

    const onAccountInput = (e) => {
      modelRef.bank_account = e.target.value.replace(/[^\d]/g, "");
    };

    const setModelRef = (data) => {
      for (let key in data) {
        modelRef[key] = data[key];
      }
    };

    const getDetail = () => {
      if (props.id) {
        console.log(props.id);
        request
          .get("/org", "/proprietor/detail", {
            id: props.id,
          })
          .then((res) => {
            setModelRef(res.detail);
          });
      }
    };

    const init = () => {
      getDetail();
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          // 打开时初始化数据
          init();
        } else {
          // 关闭时重置数据
          resetFields();
        }
      }
    );

    return {
      ...toRefs(state),
      moment,
      onCloseDrawer,
      resetFields,
      modelRef,
      validateInfos,
      onSubmit,
      onAccountInput,
      title,
      isView,
    };
  },
});
</script>

<style lang="less" scoped></style>
